<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        移除事件  解绑事件
        btn.removeEventListener('click',回调函数);//   重要

         btn.detachEvent('onclick',回调函数)

         btn.onclick=null; //---重要
     -->
    <button id="add">增加事件</button>
    移除点击
    <button id="remove">移除事件</button>

    <script>
        var addbtn = document.querySelector('#add')
        var removebtn = document.querySelector('#remove');

        addbtn.addEventListener('mouseover', function () {
            console.log('经过');
        });
        addbtn.addEventListener('click', show);
        addbtn.addEventListener('mouseout', function () {
            console.log('离开');
        });

        function show() {
            console.log('单击');
        }

        // 移除事件 解绑
        removebtn.addEventListener('click', function () {
            // addbtn 上 单击事件解绑
            addbtn.removeEventListener('click', show);
            // addbtn.onclick=null;
            // removeEventListener(addbtn,'click',show);// 调用函数  不推荐

        })

        //   addbtn.onmouseover=function(){
        //          console.log('over');
        //     }
        //     addbtn.onclick=function(){
        //          console.log('click');
        //     }
        //     addbtn.onmouseout=function(){
        //          console.log('out');
        //     }

        //     removebtn.onclick=function(){
        //         // 事件解绑
        //         addbtn.onclick=null;


        //     }

        // --------以上的 重要

        // 封装函数   ----了解
        function removeEventListener(element, eventName, fn) {
            if (element.removeEventListener) {
                element.removeEventListener(eventName, fn)
            } else if (element.detachEvent) {
                element.detachEvent('on' + eventName, fn)

            } else {
                element['on' + eventName] = null;
            }
        }

    //    removeEventListener(removebtn,'click',show)
    </script>
</body>

</html>